<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search GitHub Users</h3>
        <div>
        <input type="text" placeholder="entet the name you search" v-model="keyWord" @keyup.enter="searchUsers"/>&nbsp;
        <button @click="searchUsers">Search</button>
        </div>
    </section>
</template>

<script>
import axios from 'axios'

export default {
    name:'Search',
    data() {
        return {
            keyWord:''
        }
    },
    methods: {
        searchUsers(){
            if(!this.keyWord.trim()) return alert('搜索内容不能为空！')
            //请求前更新list数据
            this.$bus.$emit('updataObj',{isFirst:false,isLoading:true,errMsg:'',users:[]})
            axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
                response => {
                    //请求成功后更新list数据
                    console.log('成功：')
                    //获取成功后将数据通过全局事件总线传递给List组件
                    this.$bus.$emit('updataObj',{isLoading:false,errMsg:'',users:response.data.items})
                },
                error => {
                    //请求失败后更新list数据
                    console.log('失败',error.message)
                    this.$bus.$emit('updataObj',{isLoading:false,errMsg:error.message,users:[]})
                }
            )
        }
    },
}
</script>

